<template>
  <div class="home">
    <div class="bg">
    </div>
    <top-nav></top-nav>
    <article>
      <header>
        <title-name></title-name>
      </header>
      <div class="search">
        <!-- <search-with-options></search-with-options> -->
        <search-box></search-box>
      </div>
      <div class="comment">
        <tops></tops>
      </div>
      <div class="icons">
        <icons></icons>
      </div>
    </article>
    
  </div>
</template>

<script>
import TopNav from '@/layout/TopNav/index';

// import SearchWithOptions from '@/components/Search/SearchWithOptions';
import SearchBox from '@/components/Search/SimSearchBox';
import Tops from '@/components/Once/Home/Tops/index';
import Icons from '@/components/Once/Home/Icons/index';
import Bg from '@/components/Background/IndexBg';
import TitleName from '@/components/Once/Home/Title/index';


export default {
  name: 'Home',
  components: {
    TopNav,
    SearchBox,
    Tops,
    Icons,
    Bg,
    TitleName,
    // SearchWithOptions
  }
}
</script>

<style lang="scss">
.home {
  color: white;
  // background: contain no-repeat url('./bg.jpg') 100%;
  
  background: linear-gradient(rgb(0, 0, 0), rgb(20, 20, 20));
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  :not(.bg) {
    z-index: 999;
  }

  .bg {
    position: fixed;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    z-index: 1;
    background: url('../assets/bg.jpg') no-repeat center/cover;
    // background-size:100% 100%;
    // background-attachment:fixed;

    .inner-bg {
      @media screen and (min-width: 960px){
        display: none;
      }
    }
  }

  article {
    z-index: 2 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    header {
      font-size: 4em;
      text-align: center;
      margin-top: 16vh;
      margin-bottom: 6vh;

      transition: font-size ease-in-out .4s;
      @media screen and (max-width: 960px){
        font-size: 60px;
      }
    }
    .search {
      width: 720px;
      margin-bottom: 6vh;

      transition: width ease-in-out .26s;
      @media screen and (max-width: 960px){
        width: auto;
      }
    }
    .comment {
      width: 820px;
      margin-bottom: 6vh;


      @media screen and (max-width: 960px){
        width: 400px;
      }

      
      @media screen and (max-width: 600px){
        width: 340px;
      }

      @media screen and (max-width: 400px){
        width: 280px;
      }

    }

    .icons {
      @media screen and (max-width: 960px){
        display: none;
      }
    }
  }
}

</style>
